<template>
    <van-row class="container">
        <Verify
                @success="handleVote"
                :captchaType="'blockPuzzle'"
                ref="verify"
        ></Verify>
        <van-row>
            <van-image :src="bgurl"  fit="contain"></van-image>
        </van-row>
        <van-row>
            <van-row style="display: flex;justify-content: center;margin-top: 10px">
                <van-button class="set-btn right"  plain @click="handleToRoles(1)"><span class="set-btn-content">奖项设置</span></van-button>
                <van-button class="set-btn" plain @click="handleToRoles(2)"><span class="set-btn-content">投票规则</span></van-button>
            </van-row>
            <van-row style="margin-top: 20px;font-weight:bolder;">
                <van-count-down :time="currentTime">
                <template v-slot:="timeData">
                    <span class="colon">距离投票{{start?"结束":"开始"}}还有</span>
                    <span class="block">{{ timeData.days }}</span>
                    <span class="colon">天</span>
                    <span class="block">{{ timeData.hours }}</span>
                    <span class="colon">小时</span>
                    <span class="block">{{ timeData.minutes }}</span>
                    <span class="colon">分</span>
                    <span class="block">{{ timeData.seconds }}</span>
                    <span class="colon">秒</span>
                </template>
            </van-count-down>
            </van-row>
            <van-row style="text-align: center;font-size: 14px">温馨提示:点击作品图片可查看详情</van-row>
        </van-row>
        <van-row>
            <van-row class="vote">
                <van-col class="item" :span="10" v-for="item in itemList" :key="item.id">
                    <van-row class="vote-item" @click="handleToDetails(item.id)">
                        <van-row class="vote-item-top">
                            <van-row>
                                <van-col :span="8" class="vote-item-top-num">
                                    {{item.voteItemNumber}}号
                                </van-col>
                            </van-row>
                            <van-row>
                                <img width="100%" :src="item.voteItemImg" alt=""/>
                            </van-row>
                        </van-row>
                        <van-row class="vote-item-bottom">
                            <span class="botton-title">{{item.voteItemTitle}}</span>
                            <span class="botton-title">票数:<span class="botton-title-num">{{item.voteItemCount}}</span></span>
                        </van-row>
                    </van-row>
                    <van-row>
                        <van-button color="#1A4262"  class="vote-btn" block @click="checkPrama(item.id)">投票</van-button>
                    </van-row>
                </van-col>
            </van-row>
        </van-row>
        <van-row>
            <van-image :src="bottomImg" style="margin: 0 5.5%;"  fit="contain"></van-image>
            <van-row style="text-align: center;margin-bottom: 10vh">欢迎关注河南省科技馆</van-row>
        </van-row>
<!--        <van-popup-->
<!--                v-model="showRewards"-->
<!--                closeable-->
<!--                close-icon="close"-->
<!--                :style="{height:'75vh',width:'90vw'}"-->
<!--        >-->
<!--            <van-row class="vote-role scroll">-->
<!--                <van-row class="vote-role-title">-->
<!--                    奖项设置-->
<!--                </van-row>-->
<!--                <van-row>-->
<!--                    <div class="ql-container ql-snow">-->
<!--                        <div class="ql-editor"  v-html="vote.prizeInfo"></div>-->
<!--                    </div>-->
<!--                </van-row>-->
<!--            </van-row>-->
<!--        </van-popup>-->
<!--        <van-popup-->
<!--                v-model="showRoles"-->
<!--                closeable-->
<!--                close-icon="close"-->
<!--                :style="{height:'75vh',width:'90vw'}"-->
<!--        >-->
<!--            <van-row class="vote-role scroll">-->
<!--                <van-row class="vote-role-title">-->
<!--                    投票规则-->
<!--                </van-row>-->
<!--                <van-row>-->
<!--                    <div class="ql-container ql-snow">-->
<!--                        <div class="ql-editor"  v-html="vote.voteRoles"></div>-->
<!--                    </div>-->
<!--                </van-row>-->
<!--            </van-row>-->
<!--        </van-popup>-->
        <van-popup
                v-model="showSubscribe"
                closeable
                close-icon="close"
                :style="{ width:'80%'}"
        >
            <van-row style="margin-top: 10%;">长按关注公众号后进行投票</van-row>
            <van-row style="text-align: center;margin-bottom: 10%">
                <van-image style="width:193px" :src="ewm"></van-image>
            </van-row>
        </van-popup>
    </van-row>
</template>

<script>
    import {getToken} from "@/utils/auth";
    import Verify from './../components/verifition/Verify'
    import {
        frontIndex,
        frontRankingCheck,
        frontVoteByUser,
        getServerTime,
        verification
    } from "@/api/vote";
    import {getUrlKey} from "@/utils/url";
    export default {
        name: "index",
        data(){
            return{
                showRewards:false,
                showRoles:false,
                start:false,
                bgurl:require("../assets/voteimg/pic-1.jpg"),
                ewm:require("../assets/image/ewm.jpg"),
                bottomImg:require("../assets/voteimg/bottom.jpg"),
                token:getToken(),
                currentTime:24 * 60 * 60 * 1000,//需要从服务器获取剩余活动时间，为结束时间减去当前时间的毫秒数
                timeData:0,
                vote:{},
                itemList:[],
                currentItemId:0,
                showSubscribe:false
            }
        },
        components: {
            Verify
        },
        mounted(){
            const voteId =getUrlKey("voteId") || localStorage.getItem("voteId") ;
            if(voteId===null||voteId===undefined){
                this.$router.push("/501")
            }
            else{
                localStorage.setItem("voteId",voteId);
                if(!getToken()){
                    this.toLogin(window.location.href)
                }
                else{
                    getServerTime(voteId).then(res=>{
                        if(res.data.result === -1){
                            this.start=false;
                            this.currentTime = res.data.number;
                            this.timeData = res.data.number;
                        }
                        else if(res.data.result === 1){
                            this.start=true;
                            this.currentTime = res.data.number;
                            this.timeData = res.data.number;
                        }
                    })
                    this.handleGetInfo(voteId);
                }
            }
        },
        methods:{
            handleGetInfo(voteId){
                frontIndex(voteId).then(res=>{
                    this.vote = res.data.vote;
                    this.itemList = res.data.itemList;
                    this.$wxShare(this.$route.meta.title,"河南省科技馆LOGO征集入围作品公众投票活动，为你心中最美LOGO投票吧",window.location.href,this.vote.picurl);
                })
            },
            handleToDetails(itemId){
                this.$router.push({path:"/details",query:{itemId:itemId,voteId:localStorage.getItem("voteId"),start:this.start}})
            },
            handleToRoles(id){
                this.$router.push({path:"/roles",query:{html:id===1?this.vote.prizeInfo:this.vote.voteRoles,id:id}})
            },
            handleVote(params){
                let postdata = {
                    captchaVerification:params.captchaVerification,
                    voteId:localStorage.getItem("voteId"),
                    itemId:this.currentItemId
                }
                verification(params).then(res=>{
                    if(res.data.repCode==="0000"){
                        return frontVoteByUser(postdata)
                    }
                    else{
                        this.$toast({
                            message:"验证码验证失败",
                            type:"fail"
                        })
                    }
                }).then((res)=>{
                    this.$toast({
                        message:res.data.message,
                        type:res.data.rescode===0?"success":"fail"
                    })
                    this.handleGetInfo(localStorage.getItem("voteId"));
                })
            },
            checkPrama(itemId){
                if(!this.start){
                    this.$toast("活动还未开始")
                }
                else{
                    if(!getToken()){
                        this.toLogin(window.location.href)
                    }
                    else{
                        let postdata = {
                            voteId:localStorage.getItem("voteId"),
                            itemId:itemId
                        }
                        frontRankingCheck(postdata).then(res=>{
                            if(res.data.rescode===0){
                                //判断当前用户当天是否投票达到上限
                                this.currentItemId = itemId;
                                this.$refs.verify.show();
                            }
                            else if(res.data.rescode === 2){
                                this.showSubscribe = true;
                            }
                            else{
                                this.$toast({
                                    message:res.data.message,
                                })
                            }
                        })

                    }
                }

            },
        }
    }
</script>

<style scoped>
    .vote{
        margin: 10px 0 10px;
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
    }
    .item{
        margin: 10px 0;
    }
    .item:nth-child(n){
        margin-left: 5.5%;
    }
    .vote-item{
        border: 1px solid #000;
        height: 220px;
        margin: 10px 0;
    }
    .vote-btn{
        margin-top: 16px;
        height: 34px;
        border-radius: 0;
    }
    .colon{
        font-weight: 600;
    }
    .block{
        font-size: 18px;
        margin: 0 3px;
        color: #1A4262;
        font-family: HYGangYiTiJ;
        font-weight: 600;
    }
    .vote-item-top{
        display: flex;
        flex-direction: column;
        text-align: left;
        height: 75%;
    }
    .vote-item-top-num{
        background-color: #F6DE60;
        text-align: right;
        padding-right: 5px;
        height: 26px;
        line-height: 26px;
    }
    .vote-item-bottom{
        border-top: 1px solid #000000;
        display: flex;
        flex-direction: column;
        justify-content: center;
        text-align: left;
        height: 25%;
        padding-left: 12px;
    }
    .botton-title{
        /*font-weight: 600;*/
        font-size: 16px;
    }
    .botton-title-num{
        color: #1A4262;
        font-family: HYGangYiTiJ;
        font-size: 16px;
        font-weight: 600;
    }
    .vote-role{
        background: url("../assets/voteimg/rolebg.jpg") no-repeat;
        background-size: 100% 100%;
        -moz-background-size: 100% 100%;
        color: #ffffff;
        border: 1px solid #000000;
        margin: 5px;
        height:97%;
    }
    .vote-role-title{
        text-align: left;
        color: #F6DE60;
        font-weight: bolder;
        font-size: 20px;
        padding: 10px 20px;
    }
    .set-btn{
        border-radius: 0;
        height: 38px;
        border: 1px solid #000000;
        width: 120px;
    }
    .right{
        margin-right: 30px;
    }
    .set-btn-content{
        line-height:1.8;
        border-bottom: 1px solid #000000
    }
    .scroll{
        overflow:scroll;
    }
</style>
<style>
    p{
        text-align: left;
        line-height: 20px;
    }
    .ql-container.ql-snow {
         border: 0;
    }
</style>
